<template>
  <el-table :data="bannerData" border stripe>
    <!-- 基本信息 -->
    <el-table-column type="index"></el-table-column>
    <el-table-column prop="title" label="标题"></el-table-column>
    <el-table-column label="图片">
      <template slot-scope="scope">
        <img :src="scope.row.pictureUrl" class="banner_image"/>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间"></el-table-column>

    <!-- 状态 -->
    <el-table-column label="状态">
      <template slot-scope="scope">
        <el-switch :value="!!scope.row.status" @change="changeBannerStatus($event,scope.row.id)"></el-switch>
      </template>
    </el-table-column>

    <!-- 操作 -->
    <el-table-column label="操作" width="180px" class="btns">
      <template slot-scope="scope">
        <EditBanner :banner-info="scope.row" @change="getData"/>
        <DelBanner :banner-id="scope.row.id" @delete="getData"/>
<!--        <el-button  type="primary" icon="el-icon-edit" size="mini" @click=""></el-button>-->
<!--        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delBanner(scope.row.id)"></el-button>-->
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {changeBannerStatus, getBannerList} from '@/network/applet'
import EditBanner from "./EditBanner"
import DelBanner from "./DelBanner"
import pagingMixin from '@/mixins/paging'

export default {
  name: "BannerTable",
  components:{EditBanner,DelBanner},
  mixins: [pagingMixin],
  data(){
    return {
      bannerData: []
    }
  },
  props:{
    addBanner:{
      type: Number
    },
    queryInfo: {
      type: Object,
      default() {
        return {
          pageNum: 1, // 当前页
          pageSize: 5 // 每页显示多少条数据
        }
      }
    }
  },
  watch:{
    addBanner(){
      this.getData()
    }
  },
  methods: {
    async getData() {
      const {pageNum,pageSize} = this.queryInfo
      const {data:{list,total}} = await getBannerList(pageNum,pageSize)
      this.bannerData = list
      this.$emit("total",total)
    },
    async changeBannerStatus(status, id) {
      // 修改状态
      // console.log("修改id", status, id)
      const {code,msg} = await changeBannerStatus(id,+status)
      if (code !== 200) return this.alertMessage(msg,"error");
      this.bannerData = this.bannerData.map(item => {
        if (id === item.id) return {
          ...item,
          status: +status
        }
        return item
      })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped>
.banner_image{
  width: 80px;
  aspect-ratio: 1;
}
.btns{
  display: flex;
}
</style>
